import React, { useEffect } from 'react'
//导入 useState 函数
import {useState} from 'react';

export default function EffectCom() {
  //函数式组件内部调用 useState 函数
  let [count, setCount] = useState(100);
  let [count2, setCount2] = useState(0);

  //声明事件回调函数
  let fn = () => {
    //更新状态
    setCount(count + 1);
  };

  // componentDidMount 的模拟实现
  // useEffect(() => {
  //   console.log('组件挂载完毕');
  // }, []);// 第二个参数: 哪些状态发生变化后, 执行回调函数

  // // componentWillUnmount
  // useEffect(() => {
  //   //返回的函数相当于是 componentWillUnmount 生命周期方法
  //   return () => {
  //     console.log('组件将要卸载');
  //   }
  // }, []);

  //componentDidMount 与 componentWillUnmount 的结合使用
  useEffect(() => {
    console.log('组件挂载完毕 - 1');
    //返回的函数相当于是 componentWillUnmount 生命周期方法
    return () => {
      console.log('组件将要卸载 - 1');
    }
  }, []);

  // 该回调函数将会在组件挂载完成与组件更新完成自动执行
  // useEffect(() => {
  //   console.log('run run run');
  // });

  //模拟 componentDidUpdate 生命周期
  useEffect(() => {
    //做一个判断, 判断是否为第一次执行
    if(count === 100) return;
    console.log('run run run 2');
  }, [count]);// 只有在 count 状态值发生变化的时候, 才会自动执行

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={fn}>新增</button>
      <hr />
      <h1>{count2}</h1>
      <button onClick={() => {
        setCount2(count2 + 2);
      }}>新增</button>

      <hr />

      <button onClick={() => {
        setCount(count + 10);
        setCount2(count2 + 20);
      }}>更新两个状态</button>
    </div>
  )
}


